<script>
export default {
  name: "Zhuche",
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.registerForm.password1 !== '') {
          this.$refs.registerForm.validateField('password1');
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
      console.log('密码验证')
    };
    const pic = (rule,value,callback)=>{
        if(this.imageUrl===''){
            callback(new Error('请上传头像'))
        }else{
            callback()
        }
    }
    return {
      // 图片地址
      imageUrl: '',
      // 注册表单对象
      registerForm: {
        userName: '',
        password: '',
        phone: '',
        email: '',
        userAvatar: '',
        userSex: '',
        userNickname: '',
        password1: ''
      },
      rules:{
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        password1: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        userSex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        userNickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
            //必须是数字和英文
            { pattern: /^[a-zA-Z0-9_-]{3,5}$/, message: '用户名必须是3-5位字母或数字', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
            { min: 11, max: 11, message: '长度为11位', trigger: 'blur' },
        ],
        picture:[
            { validator: pic, trigger:['blur','change']}
        ]
      },
    };
  },
  methods:{
    //点击注册按钮
    handleRegister(formName) {
      console.log('注册按钮点击')
      //打印表单数据
      console.log(this.registerForm)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('http://localhost:9999/zhuche/zhuche1', this.registerForm)
              .then(r => {
                console.log('r', r.data)
                this.$message({
                  message: '注册成功',
                  type: 'success'
                })
                // 跳转到登录页面
                this.$router.push('/Login')
              })
        } else {
          this.$message({
            message: '请填写正确信息!!',
            type: 'error'
          })
          return false;
        }
      });
    },
    //返回按钮点击事件
    handleReset() {
      console.log('返回按钮点击')
      // 跳转到登录页面
      this.$router.push('/Login')
    },
    //图片上传成功
    handleAvatarSuccess(res, file) {
      console.log(res,7777);
      this.imageUrl = URL.createObjectURL(file.raw);
      this.registerForm.userAvatar =res;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
  }
}
</script>

<template>
  <div id="Zhuche">
        <!--注册表单 一行两个-->
    <el-row style="margin: auto;width: 900px;padding: 150px">
      <el-col :span="12">
        <el-form :model="registerForm" status-icon :rules="rules" ref="registerForm" label-width="80px" style="margin: auto;width: 900px;padding: 0px">
          <el-row>
            <el-col :span="10">
              <h1 class="threeD" style="color:cornflowerblue ;font-style:italic;font-size: xxx-large">注册用户</h1>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
            <el-form-item prop="userName" label="用户名" class="color1">
                <el-input v-model="registerForm.userName" placeholder="请输入用户名"></el-input>
            </el-form-item>
            </el-col>
              <el-col :span="6">
            <el-form-item prop="password" label="密码" class="color1">
                <el-input show-password type="password" autocomplete="off" v-model="registerForm.password" placeholder="请输入密码"></el-input>
            </el-form-item>
              </el-col>
          </el-row>
          <el-row>
          <el-col :span="6">
            <el-form-item prop="phone" label="手机号" class="color1">
                <el-input v-model="registerForm.phone" placeholder="请输入手机号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="email" label="邮箱" class="color1"
            :rules="[
              { required: true, message: '请输入邮箱地址', trigger: 'blur' },
              { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
            ]"
            >
                <el-input v-model="registerForm.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
          </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
            <el-form-item label="上传头像" prop="picture" class="color1">
              <el-upload
                  v-model="registerForm.picture"
                  name="picture"
                  class="avatar-uploader"
                  action="http://localhost:9999/zhuche/image"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="确认密码" class="color2" prop="password1">
                <el-input show-password type="password" class="color3" autocomplete="off" v-model="registerForm.password1" placeholder="请再次输入密码" @blur="blurHandler"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
            <el-form-item prop="userSex" label="性别" class="color1">
              <template>
                <el-radio v-model="registerForm.userSex" label="男" style="color: crimson">男</el-radio>
                <el-radio v-model="registerForm.userSex" label="女" style="color: crimson">女</el-radio>
              </template>
            </el-form-item>
            </el-col>
            <el-col :span="6">
            <el-form-item prop="userNickname" label="昵称" class="color1">
                <el-input v-model="registerForm.userNickname" placeholder="请输入昵称"></el-input>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
            <el-form-item>
                <el-button style="width: 100px" type="success" @click.prevent="handleRegister('registerForm')">注册</el-button>
            </el-form-item>
            </el-col>
            <el-col :span="6">
            <el-form-item>
                <el-button style="width: 100px;background-color:gray;border: gray"  @click="handleReset">返回</el-button>
            </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<style>
#Zhuche {
  background: url("images/1.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: cover;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: red;
  width: 78px;
  height: 78px;
  line-height: 78px;
  text-align: center;
}
.avatar {
  width: 78px;
  height: 78px;
  display: block;
}

.color1 .el-form-item__label{
  color: cornflowerblue;
}
.color2 .el-form-item__label{
  color: cornflowerblue;
}
</style>